<script>
import { GlSprintf, GlLink, GlButton } from '@gitlab/ui';
import { s__ } from '~/locale';
import { DOC_PATH_VULNERABILITY_REPORT } from 'ee/security_dashboard/constants';
import CsvExportButton from '../csv_export_button.vue';

export default {
  components: {
    GlSprintf,
    GlLink,
    GlButton,
    CsvExportButton,
  },
  inject: {
    newVulnerabilityPath: {
      default: '',
    },
    canAdminVulnerability: {
      default: false,
    },
  },
  computed: {
    shouldShowNewVulnerabilityButton() {
      return Boolean(this.newVulnerabilityPath) && this.canAdminVulnerability;
    },
  },
  i18n: {
    title: s__('SecurityReports|Vulnerability report'),
    submitVulnerability: s__('SecurityReports|Submit vulnerability'),
    description: s__(
      "SecurityReports|The Vulnerability Report shows results of successful scans on your project's default branch, manually added vulnerability records, and vulnerabilities found from scanning operational environments. %{linkStart}Learn more.%{linkEnd}",
    ),
  },
  DOC_PATH_VULNERABILITY_REPORT,
};
</script>

<template>
  <header class="vulnerability-header gl-my-5 gl-display-grid">
    <h2 class="gl-my-0 header-title" data-testid="vulnerability-report-header">
      {{ $options.i18n.title }}
    </h2>
    <p class="header-description gl-mb-0">
      <gl-sprintf :message="$options.i18n.description">
        <template #link="{ content }">
          <gl-link :href="$options.DOC_PATH_VULNERABILITY_REPORT" target="_blank">
            {{ content }}
          </gl-link>
        </template>
      </gl-sprintf>
    </p>
    <div class="header-buttons gl-display-flex gl-align-items-center">
      <gl-button v-if="shouldShowNewVulnerabilityButton" :href="newVulnerabilityPath" icon="plus">
        {{ $options.i18n.submitVulnerability }}
      </gl-button>
      <csv-export-button
        data-testid="export-vulnerabilities-button"
        :class="shouldShowNewVulnerabilityButton ? 'gl-ml-4' : 'gl-ml-auto'"
      />
    </div>
  </header>
</template>
